<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-08-20 11:19:50
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-08-20 16:57:57
 * @FilePath: \passiflora-edulis-sims\src\components\PuzzleCard\PuzzleDataCardComponent.vue
 * @Description: 拼图数据的主要展示卡片，通过 cp is来选择不同的渲染组件
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
-->
<script setup lang="ts">
import { isAiCrossWordRes } from 'src/interfaces/Responses/AIRes'
import type {
  IAiDoublePuzzleRes,
  IAiWordSearchRes,
  IAiCrossWordRes,
} from 'src/interfaces/Responses/AIRes'
type PuzzleItem = IAiDoublePuzzleRes | IAiWordSearchRes | IAiCrossWordRes

const { data } = defineProps<{ data: PuzzleItem }>()
</script>

<template>
  <div>
    <q-card bordered flat>
      <q-card-section>
        <div class="text-subtitle2 text-weight-bolder">
          {{ data.title }}
        </div>
        <div class="text-body1 text-weight-regular">
          {{ data.instructions }}
        </div>
      </q-card-section>
      <q-separator />
      <template v-if="Array.isArray(data.words)">
        <template v-for="(value, index) in data.words" :key="value">
          <div>
            <q-list separator lines>
              <q-item clickable v-ripple>
                <q-item-section>
                  <q-item-label>
                    <div class="text-weight-bold">
                      {{ index }}
                    </div>
                  </q-item-label>
                </q-item-section>
                <q-item-section>
                  <div class="text-weight-light ellipsis-2-lines">
                    {{ value }}
                  </div>
                </q-item-section>
              </q-item>
            </q-list>
          </div>
        </template>
      </template>
      <template v-else-if="isAiCrossWordRes(data)">
        <q-list separator lines>
          <template v-for="(value, key) in data.words" :key="key">
            <q-item clickable v-ripple>
              <q-item-section>
                <q-item-label>
                  <div class="text-weight-bold">
                    {{ key }}
                  </div>
                </q-item-label>
              </q-item-section>
              <q-item-section>
                <div class="text-weight-light ellipsis-2-lines">
                  {{ value }}
                </div>
              </q-item-section>
            </q-item>
          </template>
        </q-list>
      </template>
    </q-card>
  </div>
</template>

<style scoped></style>
